<template>
    <div>
        <van-cell-group>
            <div class="head">
                <div class="date">
                    {{ billItem.date.split('-')[1] }}月{{ billItem.date.split('-')[2] }}日
                </div>
                <div class="money">
                    <span><i>出</i>{{ expense }}</span>
                    <span><i>入</i>{{ income }}</span>
                </div>
            </div>
            <van-cell v-for="item in billItem.bills" :key="item.id" :title="item.type_name"
                :value="`${item.pay_type === 1 ? '-' : '+'}${item.amount}`" 
                :value-class="`${item.pay_type === 1 ? 'expense' : 'card-income'}`"
                :label="`${formateHour(+item.date)} ${item.remark}`"
                @click="goDetail(item)">
                <template #icon>
                    <div class="icon" :class="{'income' : item.pay_type ===2}">
                        <i class="iconfont icon-shouye"></i>
                    </div>
                </template>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import {formateHour} from '@/utils/date.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
    billItem: {
        type: Object,
        default: () => ({})
    }
})
//当computed中使用的响应式数据发生变更，会重新执行computed中的函数
const expense = computed(() => {
    if (!Array.isArray(props.billItem.bills)) return '0.00';
    let res = props.billItem.bills.reduce((pre, item) => {
        if (item.pay_type === 1) {
            return pre + (+item.amount)
        }
        return pre;

    }, 0)
    return res.toFixed(2)
})
const income = computed(() => {
    if (!Array.isArray(props.billItem.bills)) return '0.00';
    let res = props.billItem.bills.reduce((pre, item) => {
        if (item.pay_type === 2) {
            return pre + (+item.amount)
        }
        return pre;
    }, 0)
    return res.toFixed(2)
})
const goDetail = (item) => {
    router.push({
        path: '/detail',
        query: { id: item.id }
    })
}
</script>

<style lang="less" scoped>
.head {
    height: 60px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    align-items: center;
    background-color: #f9f9f9;

    .date {
        font-size: 14px;

    }

    .money {
        font-size: 12px;

        span {
            margin-left: 15px;

            i {
                display: inline-block;
                margin-right: 5px;
                font-weight: 200;
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                background-color: rgb(240, 240, 240);
            }
        }
    }
}

.icon {
    width: 30px;
    height: 30px;
    background-color: #37a762;
    border-radius: 50%;
    margin: auto 0;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
        color: #fff;

    }
    &.income {
        background-color: #f2b63b; 
    }
}
:deep(.card-income) {
    color: #f2b63b !important;
}
</style>
